<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { phoneRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { $t, transformI18n } from "@/plugins/i18n";
import { useVerifyCode } from "../utils/verifyCode";
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { useRouter } from "vue-router";
import type { PartialAuthData, LoginSuccessData } from "@/api/user";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Iphone from "~icons/ep/iphone";
import Keyhole from "~icons/ri/shield-keyhole-line";

const { t } = useI18n();
const loading = ref(false);
const ruleForm = reactive({
  phone: "",
  verifyCode: ""
});
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const { isDisabled, text, start, end } = useVerifyCode({
  scene: "login",
  resolvePhone: () => ruleForm.phone
});

const onLogin = async (formEl: FormInstance | undefined) => {
  loading.value = true;
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (!valid) {
      loading.value = false;
      return;
    }
    try {
      const userStore = useUserStoreHook();
      const res = await userStore.loginBySms({
        phone: ruleForm.phone,
        code: ruleForm.verifyCode
      });
      if (res.success && res.data) {
        const data = res.data as PartialAuthData | LoginSuccessData;
        if ((data as PartialAuthData).partial) {
          message("账号需完成后续流程，请按提示操作", {
            type: "warning"
          });
        } else {
          await initRouter();
          await router.push(getTopMenu(true).path);
          message(transformI18n($t("login.pureLoginSuccess")), {
            type: "success"
          });
        }
      } else {
        message(res.msg || transformI18n($t("login.pureLoginFail")), {
          type: "error"
        });
      }
    } catch (error: any) {
      message(error?.message ?? transformI18n($t("login.pureLoginFail")), {
        type: "error"
      });
    } finally {
      loading.value = false;
    }
  });
};

function onBack() {
  end();
  useUserStoreHook().SET_CURRENTPAGE(0);
}
</script>

<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
    <Motion>
      <el-form-item prop="phone">
        <el-input
          v-model="ruleForm.phone"
          clearable
          :placeholder="t('login.purePhone')"
          :prefix-icon="useRenderIcon(Iphone)"
        />
      </el-form-item>
    </Motion>

    <Motion :delay="100">
      <el-form-item prop="verifyCode">
        <div class="w-full flex justify-between">
          <el-input
            v-model="ruleForm.verifyCode"
            clearable
            :placeholder="t('login.pureSmsVerifyCode')"
            :prefix-icon="useRenderIcon(Keyhole)"
          />
          <el-button
            :disabled="isDisabled"
            class="ml-2!"
            @click="start(ruleFormRef, 'phone')"
          >
            {{
              text.length > 0
                ? text + t("login.pureInfo")
                : t("login.pureGetVerifyCode")
            }}
          </el-button>
        </div>
      </el-form-item>
    </Motion>

    <Motion :delay="150">
      <el-form-item>
        <el-button
          class="w-full"
          size="default"
          type="primary"
          :loading="loading"
          @click="onLogin(ruleFormRef)"
        >
          {{ t("login.pureLogin") }}
        </el-button>
      </el-form-item>
    </Motion>

    <Motion :delay="200">
      <el-form-item>
        <el-button class="w-full" size="default" @click="onBack">
          {{ t("login.pureBack") }}
        </el-button>
      </el-form-item>
    </Motion>
  </el-form>
</template>
